[VueJS] v-bind:class 사용방법 및 예제

vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.

v-bind:class="{ condition }"

위와 같이 조건식을 사용하여 원하는 클래스명을 추가하거나 제거할 수 있습니다. 예를들어 vuejs에서 사용되는 변수 hide의 값이 true인 경우에만 hidden이라는 클래스를 보여줄 수도 있고 아니면 status='active'인 경우에만 active 클래스명을 적용하는 것도 가능하게 됩니다. 여기서 조건식은 아주 간단하게 동작합니다.

- 조건식을 사용하여 boolean값이 true인 경우에만 해당하는 클래스명이 적용됨

조건식은 객체 형태로 나타나게됩니다. 아래와 같이 앞에는 적용될 클래스명 위치하고 뒤에는 true, false의 boolean이 위치합니다.

즉 true, false를 사용하거나 아니면 특정한 문자열을 사용해 조건식을 만들어 boolean을 반환하게 하면 어떤 클래스명 그리고 어떤 값에 따라서든 원하는 클래스명을 가질 수 있게할 수 있죠.

그럼 어떻게 사용하는지 몇 가지 예제를 알아보겠습니다.

# vuejs v-bind:class 예제보기

아래는 저장된 변수 isHidden 값에 따라 클래스명에 hidden을 적용하거나 적용하지 않는 예제입니다. 보시는 것처럼 조건식이 {} 객체 형태로 되어있죠.

위의 span 태그는 isHidden값이 true인 경우 class에 hidden이 추가됩니다.

! isHidden이 true인 경우

아래와 같이 DOM이 그려지게 될 것 입니다.

! 반대로 isHidden이 true가 아닌 경우

이 경우 true가 아니므로 hidden 클래스가 적용되지 않습니다.

# v-bind:class에 여러개의 조건식 사용하기

여러개의 조건식을 적용할 수도 있습니다. 이 경우 하나가 아닌 여러 클래스명을 적용하거나 제외할 수 있게됩니다. 방법은 위와 동일하나 {} 객체를 감싸는 배열이 위치하게됩니다. 즉 아래와 같은 형태로 존재하게됩니다.

[ { condition1 }, { condition2 }, ..., { condition3 } ]


나머지는 위의 예제와 다른 부분이 없습니다. 즉 여러개의 조건들만 배열로 구성해주는 것이 vuejs에서 v-bind:class에 적용 가능하다는 점을 기억하면 됩니다. 간단하게 예제를 하나 그려보겠습니다.

위의 예제 코드는 active와 hover라는 클래스명이 뒤의 조건에 따라 적용되도록 만든 예제입니다. 이처럼 두 개 이상의 조건식을 사용할 경우 배열을 이용하게됩니다.